<template>
  <z-paging
    ref="paging"
    v-model="itemList"
    @query="queryList"
    :fixed="true"
    :auto="false"
    :auto-show-back-to-top="true"
    :empty-view-img="`${getImageUrl('empty.png')} `"
    :empty-view-img-style="imgStyle"
  >
    <view solt="top">
      <u-navbar title="红包使用记录" height="50" title-size="36"></u-navbar>
    </view>
    <view style="padding: 20rpx; font-size: 28rpx">
      <view class="order-box" v-for="(item, index) in itemList" :key="index">
        <view class="dis-flex flex-y-between">
          <text class="dis-flex flex-y-center flex-y-between">单号：{{ item.tradeNo }}</text>
        </view>
        <view style="margin: 20rpx 0">
          <text style="font-size: 32rpx; color: #666">{{ item.remark }}</text>
        </view>
        <u-line></u-line>
        <view class="dis-flex flex-y-between" style="font-size: 24rpx">
          <text>{{ $utils.parseTime(item.createTime) }}</text>
          <view>
            <text>订单金额</text>
            <text style="color: orange">¥{{ (item.orderPrice * 0.01).toFixed(2) }}</text>
            <text style="margin-left: 10rpx">红包抵扣</text>
            <text style="color: orange">¥{{ (item.deductPrice * 0.01).toFixed(2) }}</text>
          </view>
        </view>
      </view>
    </view>
  </z-paging>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      imgStyle: {
        width: '12rem'
      },
      itemList: []
    }
  },
  onLoad() {
    this.queryList()
  },
  methods: {
    queryList(pageNo = 1, pageSize = 10) {
      if (pageNo === 1) {
        this.itemList = []
      }
      this.$u
        .get('/app-api/promotion/red/packet/used/page', {
          pageNo,
          pageSize
        })
        .then((res) => {
          this.$refs.paging.complete(res.data.list)
        })
    },
    onCancel() {
      this.show = true
    }
  }
}
</script>

<style scoped lang="scss">
.order-box {
  position: relative;
  background-color: #fff;
  padding: 20rpx 20rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
}
</style>
